<template>
  <div class="main">
    <el-card>
      <div style="text-align: right">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-edit"
        >添加菜单</el-button>
      </div>
      <el-table default-expand-all>
        <el-table-column label="菜单名称">
          <template>
            <i class="el-icon-folder-opened icon" />
            <span style="margin-left: 10px">xxx</span>
          </template>
        </el-table-column>
        <el-table-column label="权限标识" />
        <el-table-column label="描述" width="500px" />
        <el-table-column label="操作" width="300px" class="handle">
          <template>
            <div>
              <el-button type="text">添加权限点</el-button>
              <el-button type="text">修改</el-button>
              <el-button type="text">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加权限弹框 -->
    <PermissionDialog />
  </div>
</template>

<script>
import PermissionDialog from './components/permission-dialog.vue'
export default {
  name: 'Permission',
  components: {
    PermissionDialog
  },
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.main {
  padding: 20px;
  .icon {
    font-size: 18px;
  }
  ::v-deep .el-table_1_column_4 {
    text-align: center;
  }
}
</style>
